<template>
    <div>
      <Modal v-model="detailModal" title="人员信息详情" width="1350">
        <div style="height: 900px;background-color: #F8F9FE;">
          <div style="width:400px;" class="fl">
            <div class="danyuan">
              <div :class="{clickDanyuan:pickUnit===item.id}" v-for="(item, index) in unit_list" :key="index" class="fl text-center ml10" @click="pickUnitInfo(item)">
               {{item.title}}
              </div>
            </div>
            <div class="lou mt5">
              <template>
                <Row v-for="(item, index) in floor_list" :key="index" style="background-color: #fff; position: relative;min-height: 75px;" class="mt10">
                  <div class="fl mr10 ceng">{{item.title}}F</div>
                  <div class="fl hulist">
                    <template >
                      <div :class="{clickHu:pickDoorplate===item1.id,hu:item1.zd===true}" class="fl mr5" v-for="(item1, index1) in item.children" :key="index1" @click="pickDoorplateInfo(item1)">
                        <div v-if="item1.jz_num > 0 && item1.people_num > 0 && item1.jz_num < item1.people_num" style="line-height:16px">
                          <div>
                            <img :src="ydp" alt="" style="width:40%">
                          </div>
                          <div>
                            {{item.title}}F-{{item1.title}}
                          </div>
                        </div>
                        <div v-if="item1.jz_num > 0 && item1.people_num > 0 && item1.jz_num == item1.people_num" style="line-height:16px">
                          <div>
                            <img :src="gdp" alt="" style="width:40%">
                            <!-- <i class='iconfont icon-dunpai1' style="color:gold;font-size:24px"></i> -->
                          </div>
                          <div>
                            {{item.title}}F-{{item1.title}}
                          </div>
                        </div>
                        <div v-if="item1.jz_num == 0 && item1.people_num == 0">
                          {{item.title}}F-{{item1.title}}
                        </div>
                        <div v-if="item1.jz_num == 0 && item1.people_num > 0">
                          {{item.title}}F-{{item1.title}}
                        </div>
                        <div v-if="item1.jz_num > 0 && item1.people_num > 0 && item1.jz_num > item1.people_num ">
                          {{item.title}}F-{{item1.title}}
                        </div>
                      </div>
                    </template>
                  </div>
                </Row>
              </template>
            </div>
          </div>
          <div v-if="showTable" class="fl info">
            <div class="info_list">
              <div class="info_list_title">
                <div>
<!--                  <Button type="info" style="margin-right: 10px" @click="addModal = true">添加</Button>-->
                  本户人口
                </div>
              </div>
              <div class="header" style="margin-top: 20px">
                <div class="info_list_content">
                  <div :class="{clickPerson:pickUser===item.id,bg:item.focus_group===1}" style="height: inherit" class="fl person mb10" v-for="(item, index) in doorplate_list" :key="index" @click="pickUserInfo(item)">
                    <Row>
                      <Col span="5" offset="1" style="text-align: left;">
                        <i class='iconfont icon-xiaonanhai' v-if="item.sex == '男' && item.age < 18"></i>
                        <i class='iconfont icon-weibiaoti--' v-if="item.sex == '男' && item.age > 60"></i>
                        <i class='iconfont icon-nanshi1' v-if="item.sex == '男' && item.age >= 18 && item.age <= 60"></i>
                        <i class='iconfont icon-grandma' v-if="item.sex == '女' && item.age > 60"></i>
                        <i class='iconfont icon-iconnvhai' v-if="item.sex == '女' && item.age < 18"></i>
                        <i class='iconfont icon-icon-test' v-if="item.sex == '女' && item.age >= 18 && item.age <= 60"></i>
                      </Col>
                      <Col span="4" style="text-align: left;">
                        <img v-if="item.jz_num >= 2" :src="gdp" alt="" style="width:90%;margin-top: 18%;">
                        <!-- <i v-if="item.jz_num >= 2" class='iconfont icon-dunpai1' style="color:gold"></i> -->
                        <i v-if="item.jz_num == 1" class='iconfont icon-yimiao1' style="color:mediumseagreen"></i>
                      </Col>
                    </Row>
                    <Row class="mb5">
                      <Col span="7" class="ivu-form-item-label">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</Col>
                      <Col span="7" class="ivu-form-item-label title-align">{{item.user_name}}</Col>
                      <Col span="10" class="ivu-form-item-label">
                        <div v-for="(list, index) in item.zdrq" :key="index">
                          <Tag color="warning" class="zd-tag" size="default">{{list}}</Tag>
                        </div>
                      </Col>
                      <!-- <span v-if="item.user_type==='0'">（常驻人口）</span><span v-if="item.user_type==='1'">（流动人口）</span> -->
                    </Row>
                    <Row class="mb5">
                      <Col span="7" class="ivu-form-item-label">身份证：</Col>
                      <Col span="17" class="ivu-form-item-label title-align">{{item.cardno.substring(0,3)+'********'+item.cardno.substring(14,18)}}</Col>
                    </Row>
                    <Row class="mb5">
                      <Col span="7" class="ivu-form-item-label">电&nbsp;&nbsp;&nbsp;&nbsp;话：</Col>
                      <Col span="17" class="ivu-form-item-label title-align">{{item.mobile}}</Col>
                    </Row>
                  </div>
                </div>
              </div>
            </div>
            <div class="content">
              <div class="info_list_title" v-if="currentPerson !== ''">个人信息表</div>
              <div class="wk">
                <div class="img1 b_top_left">
                  <img class="img2" :src="currentPerson.photo || nophoto">
                </div>
                <div class="w90 b_top_left td1">姓名</div>
                <div class="w165 b_top_left ti">{{currentPerson.name}}</div>
                <div class="w90 b_top_left td1">性别</div>
                <div class="w105 b_top_left ti">{{currentPerson.sex}}</div>
                <div class="w90 b_top_left td1">民族</div>
                <div class="w135 b_bottom ti">{{currentPerson.folk}}</div>
                <div class="w90 b_bottom_right td1">身份证号</div>
                <div class="w165 b_bottom_right ti">{{currentPerson.TMcardno}}</div>
                <div class="w90 b_top_left td1">政治面貌</div>
                <div class="w105 b_top_left ti">{{currentPerson.political_outlook}}</div>
                <div class="w90 b_bottom_right td1">居住情况</div>
                <div class="w135 b_bottom ti">{{currentPerson.living_condition}}</div>
                <div class="w90 b_bottom_right td1">住址</div>
                <div class="w585 b_bottom ti">{{currentPerson.present_address}}</div>
                <div class="w90 b_bottom_right td1">户籍地址</div>
                <div class="w585 b_bottom ti">{{currentPerson.register_address}}</div>
                <div class="w135 b_bottom_right td1">联系方式</div>
                <div class="w190 b_bottom_right ti">{{currentPerson.mobile}}</div>
                <div class="w90 b_bottom_right td1">现住地址</div>
                <div class="w395 b_bottom ti">{{currentPerson.present_address}}</div>
                <div class="w135 b_bottom_right td1">职业</div>
                <div class="w190 b_bottom_right ti">{{currentPerson.occupation}}</div>
                <div class="w90 b_bottom_right td1">银行卡收入情况</div>
                <div class="w105 b_bottom_right ti">{{currentPerson.personal_income}}</div>
                <div class="w120 b_bottom_right td1">工作单位</div>
                <div class="w170 b_bottom ti">{{currentPerson.work_unit}}</div>
                <div class="w135 b_bottom_right td1">文化程度</div>
                <div class="w190 b_bottom_right ti">{{currentPerson.education}}</div>
                <div class="w90 b_bottom_right td1">婚姻状况</div>
                <div class="w105 b_bottom_right ti">{{currentPerson.marriage}}</div>
                <div class="w120 b_bottom_right td1">生育子女</div>
                <div class="w170 b_bottom ti">{{currentPerson.child}}</div>
                <div class="w135 b_bottom_right td1">兵役情况</div>
                <div class="w190 b_bottom_right ti">{{currentPerson.military}}</div>
                <div class="w90 b_bottom_right td1">国籍</div>
                <div class="w105 b_bottom_right ti">{{currentPerson.register_country}}</div>
                <div class="w120 b_bottom_right td1">户籍-省</div>
                <div class="w170 b_bottom ti">{{currentPerson.register_province}}</div>
                <div class="w135 b_bottom_right td1">户籍-市</div>
                <div class="w190 b_bottom_right ti">{{currentPerson.register_city}}</div>
                <div class="w90 b_bottom_right td1">户籍-区</div>
                <div class="w395 b_bottom ti">{{currentPerson.register_area}}</div>
                <div class="w135 b_bottom_right td1">父亲姓名</div>
                <div class="w190 b_bottom_right ti">{{currentPerson.fq_xm}}</div>
                <div class="w90 b_bottom_right td1">父亲证件类型</div>
                <div class="w105 b_bottom_right ti">{{currentPerson.fq_card_type}}</div>
                <div class="w120 b_bottom_right td1">父亲证件号码</div>
                <div class="w170 b_bottom ti">{{currentPerson.fq_card_no}}</div>
                <div class="w135 b_bottom_right td1">母亲姓名</div>
                <div class="w190 b_bottom_right ti">{{currentPerson.mq_xm}}</div>
                <div class="w90 b_bottom_right td1">母亲证件类型</div>
                <div class="w105 b_bottom_right ti">{{currentPerson.mq_card_type}}</div>
                <div class="w120 b_bottom_right td1">母亲证件号码</div>
                <div class="w170 b_bottom ti">{{currentPerson.mq_card_no}}</div>
                <div class="w135 b_bottom_right td1">配偶姓名</div>
                <div class="w190 b_bottom_right ti">{{currentPerson.po_xm}}</div>
                <div class="w90 b_bottom_right td1">配偶证件类型</div>
                <div class="w105 b_bottom_right ti">{{currentPerson.po_card_type}}</div>
                <div class="w120 b_bottom_right td1">配偶证件号码</div>
                <div class="w170 b_bottom ti">{{currentPerson.po_card_no}}</div>
<!--                <div class="w135 b_bottom_right td1">重点人群</div>-->
<!--                <div class="w675 b_bottom ti">{{currentPerson.focus_group}}</div>-->
                <div class="w135 b_right td1">备注</div>
                <div class="w675 ti">{{currentPerson.remarks}}</div>
              </div>
            </div>
          </div>
          <div v-if="!showTable">
            <template>
              <Table :columns="columns" :data="data">
                <template slot-scope="{ row, index }" slot="user_name">
                  <div v-if="row.focus_group===1"><Tag color="warning">重点人群</Tag>{{row.user_name}}</div>
                  <div v-else>{{row.user_name}}</div>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                  <Button type="primary" size="small" style="margin-right: 5px" @click="detailUserInfo(row)">详情</Button>
                </template>
              </Table>
              <div style="text-align: right;margin-top: 10px">
                <Page :total="initInfo.total" :page-size="initInfo.pageSize" show-total @on-change="pageChange"/>
              </div>
            </template>
          </div>
        </div>
      </Modal>
    </div>
</template>

<script>
import './index.less'
import { findGridUserList, findTreeList, findSubordinateList, findDoorplateUserList, getUserInfoByCardNo } from '@/api/eventlist'
import { getDictList } from '@/api/common'
import { getProvinceList, getCityList, getAreaList, getSexByeCardNo, getAgeByeCardNo } from '@/api/grid'
import gdp from '@/assets/images/gdp.jpg'
import ydp from '@/assets/images/ydp.jpg'
import nophoto from '@/assets/images/nophoto.jpeg'
export default {
  name: 'grid-person',
  data () {
    return {
      nophoto,
      gdp,
      ydp,
      cardno: '',
      addModal: false,
      changeDanyuan: 0,
      currentPerson: {},
      personModal: false,
      detailModal: false,
      columns: [
        {
          title: '姓名',
          slot: 'user_name',
          align: 'left'
        },
        {
          title: '身份证号',
          key: 'TMcardno',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      data: [],
      initInfo: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        user_name: '',
        unit_id: ''
      },
      unit_list: [],
      floor_list: [],
      doorplate_list: [],
      pickUnit: '',
      pickDoorplate: '',
      pickUser: '',
      showTable: true,
      pageChangeInfo: {}
    }
  },
  methods: {
    init (e1) {
      let data = {
        building_id: e1.id
      }
      this.showUnit(data, 1)
      this.detailModal = true
      this.showTable = false
      this.initInfo.pageNo = 1
      let _this = this
      setTimeout(function () {
        _this.pickUnit = _this.unit_list[0].id
        _this.initInfo.unit_id = _this.unit_list[0].id
        _this.findGridUserList()
      }, 2000)
    },
    detailUserInfo (e) {
      this.pickUnit = e.unit_id
      this.pickDoorplate = e.doorplate_id
      this.pickUser = e.id
      this.detailModal = true
      this.showTable = true
      this.showUnit(e, 2)
      this.findDoorplateUserList(e)
      this.getUserInfoByCardNo(e)
    },
    showUnit (e, e1) {
      let data = {
        grade: '7',
        id: e.building_id
      }
      findTreeList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.unit_list = ret.data.data
          let data = {}
          if (e1 === 1) {
            data = {
              id: this.unit_list[0].id
            }
          } else if (e1 === 2) {
            data = {
              id: this.pickUnit
            }
          }
          this.showFloor(data)
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.msg
          })
        }
      })
    },
    showFloor (e) {
      let data = {
        grade: '8',
        id: e.id
      }
      findSubordinateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.floor_list = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.msg
          })
        }
      })
    },
    findDoorplateUserList (e) {
      this.doorplate_list = []
      let data = {
        doorplate_id: e.doorplate_id
      }
      findDoorplateUserList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.doorplate_list = ret.data.data
          for (var i = 0; i < this.doorplate_list.length; i++) {
            if (this.doorplate_list[i].focus_group_detail) {
              this.doorplate_list[i].zdrq = this.doorplate_list[i].focus_group_detail.split(',')
            }
            this.doorplate_list[i].sex = getSexByeCardNo(this.doorplate_list[i].cardno)
            this.doorplate_list[i].age = getAgeByeCardNo(this.doorplate_list[i].cardno)
          }
          console.log(this.doorplate_list, '人员心心')
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.msg
          })
        }
      })
    },
    getUserInfoByCardNo (e) {
      let data = {
        cardno: e.cardno
      }
      getUserInfoByCardNo(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.currentPerson = ret.data.data
          this.getDicInfo(this.currentPerson.fq_card_type, 'fq')
          this.getDicInfo(this.currentPerson.mq_card_type, 'mq')
          this.getDicInfo(this.currentPerson.po_card_type, 'po')
          this.getProvinceInfo(this.currentPerson.register_province)
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.msg
          })
        }
      })
    },
    pickUserInfo (e) {
      this.pickUser = e.id
      this.getUserInfoByCardNo(e)
    },
    pickDoorplateInfo (e) {
      this.showTable = true
      this.pickDoorplate = e.id
      let data = {
        doorplate_id: e.id
      }
      findDoorplateUserList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.doorplate_list = ret.data.data
          for (var i = 0; i < this.doorplate_list.length; i++) {
            this.doorplate_list[i].sex = getSexByeCardNo(this.doorplate_list[i].cardno)
            this.doorplate_list[i].age = getAgeByeCardNo(this.doorplate_list[i].cardno)
            if (this.doorplate_list[i].focus_group_detail) {
              this.doorplate_list[i].zdrq = this.doorplate_list[i].focus_group_detail.split(',')
            }
          }
          if (this.doorplate_list.length > 0) {
            this.pickUser = this.doorplate_list[0].id
            this.getUserInfoByCardNo(this.doorplate_list[0])
          } else {
            this.currentPerson = {}
          }
          console.log(this.doorplate_list, '本户人员')
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.msg
          })
        }
      })
    },
    pickUnitInfo (e) {
      this.pickUnit = e.id
      this.pickDoorplate = ''
      this.showFloor(e)
      this.doorplate_list = []
      this.currentPerson = {}
      this.showTable = false
      this.initInfo.unit_id = e.id
      this.initInfo.pageNo = 1
      this.findGridUserList()
    },
    pageChange (page) {
      this.initInfo.pageNo = page
      this.findGridUserList()
    },
    findGridUserList () {
      findGridUserList(this.initInfo).then(ret => {
        if (ret.data.errcode === 0) {
          this.initInfo.total = ret.data.data.totalRecord
          this.data = []
          this.data = ret.data.data.results
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.msg
          })
        }
      })
    },
    isCardNo (card) {
      // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
      var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (reg.test(card) === false) {
        return false
      }
    },
    // 获取字典数据
    getDicInfo (value, str) { // 证件类型
      getDictList({ 'type': 'csc_squser_cardtype' }).then(ret => {
        if (ret.data.errcode === 0) {
          this.dicList = ret.data.data.results
          for (var i = 0; i < this.dicList.length; i++) {
            if (str === 'fq') {
              if (value === this.dicList[i].value) {
                this.currentPerson.fq_card_type = this.dicList[i].label
              }
            } else if (str === 'mq') {
              if (value === this.dicList[i].value) {
                this.currentPerson.mq_card_type = this.dicList[i].label
              }
            } else if (str === 'po') {
              if (value === this.dicList[i].value) {
                this.currentPerson.po_card_type = this.dicList[i].label
              }
            }
          }
        } else {
          this.$Notice.error({ title: '获取字典列表失败', desc: '' })
        }
      })
    },
    getProvinceInfo (value) {
      getProvinceList({}).then(res => {
        if (res.data.errcode === 0) {
          for (var i = 0; i < res.data.data.length; i++) {
            if (value === res.data.data[i].province_code) {
              this.getCityInfo(value, this.currentPerson.register_city)
              this.getAreaInfo(this.currentPerson.register_city, this.currentPerson.register_area)
              this.currentPerson.register_province = res.data.data[i].province_name
            }
          }
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    },
    getCityInfo (code, value) {
      getCityList({ province_code: code }).then(res => {
        if (res.data.errcode === 0) {
          for (var i = 0; i < res.data.data.length; i++) {
            if (value === res.data.data[i].city_code) {
              this.currentPerson.register_city = res.data.data[i].city_name
            }
          }
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    },
    getAreaInfo (code, value) {
      getAreaList({ city_code: code }).then(res => {
        if (res.data.errcode === 0) {
          for (var i = 0; i < res.data.data.length; i++) {
            if (value === res.data.data[i].area_code) {
              this.currentPerson.register_area = res.data.data[i].area_name
            }
          }
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    }
  }
}
</script>

<style scoped>

  /deep/ ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: rgba(255,255,255,0.93);
  }

  /deep/ ::-webkit-scrollbar-thumb {
    border-radius:5px;
    -webkit-box-shadow: inset 0 0 6px rgba(250, 250, 250, .3);
    background-color: rgba(220,220,220,0.93);
  }

  /deep/ ::-webkit-scrollbar-corner {
    background-color: rgba(255,255,255,0.93);
  }

  .danyuan {
    height: 75px;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    background-color: #fff;
  }

  .danyuan div {
    width: 80px;
    height: 40px;
    margin-top: 13px;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 18px;
    line-height: 20px;
    background-color: #F3F4F6;
    color: #939393;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
  }

  /*改变后单元样式*/
  .clickDanyuan {
    background-color: #FFF0D3 !important;
    color: #EB9F15 !important;
  }

  .clickHu {
    background-color: #FFF0D3 !important;
    color: #EB9F15 !important;
  }

  .clickPerson {
    background-color: #EBF1FD !important;
    color: #5772E8 !important;
  }

  .lou {
    height: 800px;
    overflow-y: auto
  }

  .ceng {
    width: 70px;
    height: 50px;
    text-align: center;
    border-radius: 15px;
    background-color: #D5E4FC;
    font-size: 20px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    color: #5571E6;
    margin: auto;
    top: 0;
    left: 10px;
    bottom: 0;
    line-height: 30px;
    position: absolute;
  }

  .hu {
    width: 85px;
    height: 50px;
    text-align: center;
    border: 1px solid #FF9900;
    background-color: #F3F4F6;
    cursor: pointer;
    margin-bottom: 5px;
    line-height: 30px;
    color: #939393;
    font-weight: bold;
  }
  .bg{
    border: 1px solid #FF9900;
  }
  .hulist {
    margin-left: 75px;
    width: 300px;
  }

  .person {
    width: 200px;
    background-color: #F3F4F6;
    height: 120px;
    text-align: center;
    padding-top: 5px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .info {
    width: 850px;
  }

  .info_list {
    width: 850px;
    height: auto;
    padding: 10px;
    background-color: #fff;
  }
  .info_list_title {
    width: 900px;
    height: 20px;
    line-height: 20px;
    font-size: large;
    margin-bottom: 10px;
  }
  .header {
    height: auto;
    width: 830px;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .info_list_content {
    display: flex;
  }

  .fl {
    float: left;
    padding: 10px;
  }

  .text-center {
    text-align: center;
  }

  .ml10 {
    margin-left: 10px;
  }

  .mr10 {
    margin-right: 10px;
    /* margin-bottom: 3px; */
  }
  .mb10 {
    margin-right: 10px;
    margin-bottom: 3px;
  }
  .mr5 {
    margin-right: 5px;
    width: 85px;
    height: 50px;
    text-align: center;
    /*border: 1px solid #000;*/
    background-color: #F3F4F6;
    cursor: pointer;
    margin-bottom: 5px;
    line-height: 30px;
    color: #939393;
    font-weight: bold;
  }
  .mr6 {
    margin-right: 5px;
    width: 85px;
    height: 50px;
    text-align: center;
    /*border: 1px solid #000;*/
    background-color: #F3F4F6;
    cursor: pointer;
    margin-bottom: 5px;
    line-height: 17px;
    color: #939393;
    font-weight: bold;
  }
  .mt5 {
    margin-top: 5px;
  }

  .mt10 {
    margin-top: 10px;
  }
  .mb5 {
    margin-bottom: 5px;
  }
  .content {
    height: 690px;
    width: 850px;
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
  }
  .info_list_content .iconfont {
    font-family: "iconfont" !important;
    font-size: 27px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .title-align {
    text-align: left;
  }
  .zd-tag {
    height: 15px;
    width: 40px;
    line-height: 16px;
    font-size: 12px;
  }
</style>
